<template>
    <div class="totals_content">
        <!-- 头部图片 -->
        <div class="img_pro" @click="jump_jiesuo()">
            <img src="images/totals_list_03.png">
            <div class="pro_info">
                <p>已订阅 <span>16</span> 个 / <del> 共30个</del></p>
                <h3>无敌猫罐头剩余<span>8</span>天，可以随便订阅</h3>
                <span class="long">延长无敌猫罐头</span>
            </div>
        </div>
        <!--  最进访问-->
        <div class="now_list">
            <h4>最近访问</h4>
            <keep-alive>
            <div class="dl_list">
                 <div class="dl"  v-for="(item) in recently" :Key="item.id"  @click="href(item.id,item)">
                    <Onedl :img="item.img" :title="item.title" ></Onedl>
                </div>
            </div>
            </keep-alive>
        </div>
        <div class="all_list">
            <h4>全部 <span class="iconfont icon-htmal5icon16"></span></h4>
            <div class="dl_list">
                <div class="dl"  v-for="(item) in this.$store.state.totalsx.new_totalsinfo" :Key="item.id"  @click="href(item.id,item)">
                    <Onedl :img="item.img" :title="item.title" ></Onedl>
                </div>
          
            </div>
        </div>
        <Icon>
            <span slot="list" class="icon_list" v-on:click="jump()">×</span>
        </Icon>
    </div>
</template>

<script>
import Onedl from "@/components/totals_list_onedl.vue"
import Icon from "@/components/all_iconlist.vue"
export default {
    data(){
        return{
            //最近
            recently:[]
        }
    },
    components:{
        Onedl,
        Icon
    },
    methods:{
        jump(){
            this.$router.push("/index")
        },
        href(id,item){
            //把要跳转的页面的id传过去
            // 判断是否是点击过的最新的值
            // if(this.recently.length){
                // let arr = this.recently
                // let isyes = false
                
                // this.recently.forEach((items)=>{
                    // console.log(items)
                    // if(items.id !== item.id){
                        this.recently.unshift(item)
                    //     return
                        
                    //     }

                // })
                // this.recently=arr
               
            // }else{
                // this.recently.unshift(item)

            // }
        // if (localStorage.getItem("data")) {
        //     this.recently=JSON.parse(localStorage.getItem("data"));
        // }
        localStorage.setItem("data",JSON.stringify(this.recently))  
            this.$router.push({path:"/one",query:{id:id}})
        },
        jump_jiesuo(){
            this.$router.push("/jiesuo")
        }
    },
    mounted(){
        this.$store.dispatch("totalsinfo")

    },
    created () {
        //在页面加载时读取localStorage里的状态信息
        if (localStorage.getItem("data")) {
            this.recently=JSON.parse(localStorage.getItem("data"));
        }
        // 在页面刷新时将vuex里的信息保存到localStorage里
        // window.addEventListener("beforeunload",()=>{
        //     localStorage.setItem("data",JSON.stringify(this.recently))
        // })
      },

}
</script>

<style scoped>
.totals_content{
    box-sizing: border-box;
    padding: 0 .18rem;

}
.img_pro{
    margin-top: .3rem;
    width: 100%;
    position: relative;
}
.img_pro img{
    width: 100%;
    height: 1.73rem
}
.img_pro .pro_info{
    width: 1.7rem;
    position: absolute;
    top: .6rem;
    left: .12rem;
    font-size: .11rem;
}
.img_pro .pro_info h3{
    margin: .06rem 0 .1rem 0;
    line-height: .18rem;
    font-weight: normal;

}
.img_pro .pro_info span.long{
    height: .3rem;
    display: inline-block;
    line-height: .3rem;
    padding: 0 .1rem;
    border-radius: .15rem;
    background: #ebebee;
    
}
.dl_list {
    display: flex;
    /* flex-direction: column; */
    flex-wrap: wrap;
    justify-content: flex-start;

}
.dl_list div{
    display: inline;
}
.dl{
    width: .71rem;
}
h4{
    font-size: .18rem;
    margin: .3rem 0;

}
.icon-htmal5icon16{
    font-size: .2rem;
}
.now_list .dl_list{
    max-height: 1.75rem;
    overflow: hidden;
}
.all_list h4{
    margin-top: .06rem;
}
.all_list h4 span{
    float: right;
}
.icon_list{
    display: inline-block;
    width: .4rem;
    line-height: .4rem;
    text-align: center;
    color: #ffffff;
    font-size: .3rem;
}
</style>